import { View, CommonEvent } from "@tarojs/components";
import './index.scss';
import LgBadge from "../badge";

interface applyContent {
  attrName: string, 
  content: string, 
  type?: number | 0 | 1
}
interface LgInputProps {
  type?: 'A' | 'B',
  title: string,
  time?: string,
  status: {type?: number | 1 | 2 | 3 | 4, text: string}, 
  applicant?: {userName: string, userIcon: string, appliTime: string},
  onClick?: (event?: CommonEvent) => void,
  applyContent: applyContent[],
  className?: string,
  style?: string | object
}

export default function LgApplyBlock(props: LgInputProps) {
  return (
    <View className="lg_apply_warp">
      <View onClick={props.onClick} className={`lg_apply ${props.className || ""} ${props.type ? "lg_apply_" + props.type : "lg_apply_A"} `} style={props.style || ""}>
        <View className="lg_apply_top clear">
          <View className="lg_apply_title left">{props.title}</View>
          <LgBadge className="lg_apply_status" color={props.status.type || 1}>{props.status.text}</LgBadge>
          {(!props.type || props.type == "A") ? <View className="lg_apply_time right">{props.time || ""}</View> : null }
        </View>
        <View className="lg_apply_content">
          {
            props.applyContent.map((o, i) => {
              return (
                <View className={`lg_apply_item ${o.type ? "lg_apply_item_one oneline" : "lg_apply_item_milt"}`} key={"lg_apply_i" + i}>
                  <View className="lg_apply_i_attr">{o.attrName}:&nbsp;</View>
                  <View className="lg_apply_i_content">{o.content}</View>
                </View>
              )
            })
          }
        </View>
        {
          (props.type && props.type == "B" && props.applicant) ? 
            <View className="lg_apply_person clear">
              <View className="left lg_apply_p_icon" style={`background-image: url(${props.applicant.userIcon})`} />
              <View className="left lg_apply_p_name">{props.applicant.userName}</View>
              <View className="left lg_apply_p_time">{props.applicant.appliTime || "--"}</View>
            </View> : null
        }
      </View>
    </View>
  )
}
